<template>
    <div class="detals">
        <div class="message-box" style="margin-top: -20px">
            <el-header class="title" style="position: relative;top: 30px;left:-15px;font-size: 30px">
                <i class="el-icon-s-order">详细信息</i>
            </el-header>
            <el-divider></el-divider>
            <div class="message">
                <div class="grid-content bg-purple">案号：<br>{{zc.caseNo}}</div>
                <div class="grid-content bg-purple">委托人：<br>{{zc.caseWtr}}</div>
                <div class="grid-content bg-purple">办案机关：<br>{{zc.bnjg}}</div>
                <div class="grid-content bg-purple">承办人：<br>{{zc.cbr}}</div>
                <div class="grid-content bg-purple">联系电话：<br>{{zc.tel}}</div>
                <div class="grid-content bg-purple">侦察案号：<br>{{zc.zcnh}}</div>
                <div class="grid-content bg-purple">刑拘时间：<br>{{zc.xjsj}}</div>
                <div class="grid-content bg-purple">逮捕时间：<br>{{zc.dbsj}}</div>
                <div class="grid-content bg-purple">侦察期限：<br>{{zc.zcqxb+'至'+zc.zcqxe}}</div>
                <div class="grid-content bg-purple">补充侦察期限：<br>{{zc.bczcb+'至'+zc.bczce}}</div>
                <div class="grid-content bg-purple">二次补充侦查期限：<br>{{zc.ecbcb+'至'+zc.ecbce}}</div>
                <div class="grid-content bg-purple">备注：<br>{{zc.remark}}</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props:['zc'],
        data() {
            return {}
        },
        methods:{}
    }
</script>

<style scoped>
    .detals{
        width: 100%;
    }
    .message-box{
        width: 100%;
    }
    .message{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin-left: 8px;
    }
    .bg-purple {
        border: 1px solid gainsboro;
        width: 32%;
        padding-top: 15px;
        height: 70px;
        padding-left: 10px;
    }
</style>